<template>
  <table-header>
    <template #text>
      筛选结果
    </template>
    <template #right>
      <router-link :to="{name: '新建策略'}">
        <u-button type="primary" icon="add">
          新建策略
        </u-button>
      </router-link>
      <u-icon type="refresh-right" class="tb-ic" />
      <u-icon type="column-height" class="tb-ic" />
      <u-icon type="set" class="tb-ic" />
    </template>
  </table-header>
  <u-table
    :data="datas"
    :columns="columns"
    show-pagination
    stripe
    row-key="id"
    :pagination="{
      showTotal: true,
      showSizer: true,
      total: datas.length
    }"
  >
    <template #name="{ row }">
      <u-button type="text" @click="handleClick">
        {{ row.celve }}
      </u-button>
    </template>
    <template #icon="{ row }">
      <u-button
        v-if="row.zhuang === '已暂停'"
        type="text"
        icon="pause"
        class="m-r-1 action-button fon"
      />
      <u-button
        v-else
        type="text"
        icon="play"
        class="m-r-1 action-button fon"
      />
    </template>
    <template #action="{ row }">
      <u-tooltip title="编辑">
        <u-button
          type="text"
          icon="edit"
          class="m-r-1 action-button"
          @click="handleView(row)"
        />
      </u-tooltip>
      <u-tooltip title="历史版本">
        <u-button
          type="text"
          icon="alarm-clock"
          class="m-r-1 action-button"
          @click="handleView(row)"
        />
      </u-tooltip>
      <u-tooltip title="禁用">
        <u-button
          type="text"
          icon="close-circle-outline"
          class="m-r-1 action-button"
          @click="handleView(row)"
        />
      </u-tooltip>
      <u-tooltip title="删除">
        <u-button
          type="text"
          icon="delete"
          class="m-r-1 action-button"
          @click="handleView(row)"
        />
      </u-tooltip>
    </template>
  </u-table>
</template>

<script>
import getAllCompony from '@/mock/atlas'
import tableHeader from '@C/tableHeader.vue'

export default {
  components: {
    tableHeader
  },
  setup() {
    const columns = [
      { key: 'xuhao', title: '序号', width: 100 },
      {
        key: 'celve', title: '策略名称', ellipsis: true, minWidth: 110, slot: 'name'
      },
      { key: 'zhuang', title: '策略状态', width: 100 },
      {
        key: 'zhuang', title: '运行/暂停', width: 100, slot: 'icon'
      },
      { key: 'name', title: '创建人', width: 100 },
      { key: 'jigou', title: '提出机构', width: 120 },
      { key: 'riqi', title: '创建日期', width: 130 },
      { key: 'jibie', title: '策略优先级', width: 110 },
      {
        key: 'action', title: '操作', width: 150, slot: 'action', fixed: 'right'
      }
    ]
    const datas = getAllCompony().data
    const handleView = row => {
      console.log(123, row)
    }
    const handleClick = row => {
      console.log(546, row)
    }

    return {
      datas,
      columns,
      handleView,
      handleClick
    }
  }
}
</script>

<style scoped>
.fon {
  font-size: 20px;
}
</style>
